<template>
	<view class="page">
		<status-bar title="会员签到活动"></status-bar>
		<view class="topHead thmeBg flex-box align-center" :style="{'--color': color}">
			<image :src="staticUrl+'/images/jh_up/signIn2-head.png'" class="bg"></image>
			<view class="box" v-if='signData'>
				<view class="flex-box align-center flex-center" v-if='signData.sign'>
					<image :src="staticUrl+'/images/jh_up/icon-coin1.png'" class="top-coin" mode="widthFix"></image>
					<text class="coin-num">{{ signData.sign }}</text>
				</view>
				<view class="flex-box align-center flex-center">
					<text class="txt1">已连续签到<text>{{ pageData.Cumulative }}</text>天</text>
					<!-- <text class="txt2">?</text> -->
				</view>
				<view class="record-btn" @click="toUrl('integralRecord')">
					<text>{{nameDefinition.fenTitle?nameDefinition.fenTitle:'积分'}}记录</text>
					<text class="iconfont icon-xiangyouxiayiye"></text>
				</view>
			</view>
		</view>
		<view class="content" v-if='pageData'>
			<view class="sign_in">
				<view class="title" v-html="pageData.CumulativeTitle"></view>
				<!-- 自定义天数 -->
				<view class="style_1" v-if='pageData.period == 5'>
					<view class="list">
						<view v-for="(item1,j) in Math.ceil(pageData.data.list.length/5)" :key='j'>
							<view class="col-sin flex-box align-center" v-if="j%2==0">
								<image :src="staticUrl+'/images/jh_up/icon-ww.png'" class="icon-ww" v-if='j < Math.ceil(pageData.data.list.length/5)-1'></image>
								<view class="item flex-box align-center" v-for="(item,i) in pageData.data.list.slice(5*j,5*(j+1))" :key='i' :class="{
									active: item.signIn == 1,
									today: item.today == 1 && item.signIn != 1
								}">
									<view class="day-box">
										<view class="day">
										{{ 5*j+i+1 }}
										<!-- 1积分 2余额 3优惠券-->
										<image v-if='item.predict' :src="staticUrl+'/images/jh_up/icon-coin'+item.predict.type+'.png'" class="icon-coin" mode="heightFix"></image>
										<image :src="staticUrl+'/images/jh_up/coin-today.png'" class="coin-today" mode="widthFix"></image>
										</view>
										<view class="day-txt" v-if='item.predict'>{{ item.predict.title }}</view>
									</view>
									<view class="bar-box flex"><view></view></view>
								</view>
							</view>
							<view class="col-odd flex-box align-center" v-else>
								<image :src="staticUrl+'/images/jh_up/icon-ww.png'" class="icon-ww" v-if='j < Math.ceil(pageData.data.list.length/5)-1'></image>
								<view class="item flex-box align-center" v-for="(item,i) in pageData.data.list.slice(5*j,5*(j+1)).reverse()" :key='i' :class="{
									active: item.signIn == 1,
									today: item.today == 1 && item.signIn != 1
								}">
									<view class="day-box">
										<view class="day">
											{{ 5*(j+1)-i }}
											<image v-if='item.predict' :src="staticUrl+'/images/jh_up/icon-coin'+item.predict.type+'.png'" class="icon-coin" mode="heightFix"></image>
											<image :src="staticUrl+'/images/jh_up/coin-today.png'" class="coin-today" mode="widthFix"></image>
										</view>
										<view class="day-txt" v-if='item.predict'>{{ item.predict.title }}</view>
									</view>
									<view class="bar-box flex"><view></view></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 周记录 -->
				<view class="style_2" v-if='pageData.period == 1'>
					<view class="list flex-box" v-if='pageData.data.list && pageData.data.list.length > 0'>
						<view class="item" v-for="(item,i) in pageData.data.list" :key='i' :class="item.signIn==1||item.today==1?'thmeBg active':''" :style="{
							'--color': color,
							'opacity': (item.signIn==1||item.mStatus == 1||item.mStatus == 0)?0.6:1}">
							<view v-if='i==0'>星期一</view>
							<view v-if='i==1'>星期二</view>
							<view v-if='i==2'>星期三</view>
							<view v-if='i==3'>星期四</view>
							<view v-if='i==4'>星期五</view>
							<view v-if='i==5'>星期六</view>
							<view v-if='i==6'>星期日</view>
							<template v-if='item.predict'>
								<!-- 1积分 2余额 3优惠券-->
								<image v-if='item.predict' :src="staticUrl+'/images/jh_up/icon-coin'+item.predict.type+'.png'" mode="heightFix"></image>
								<view>{{ item.predict.title }}</view>
							</template>
						</view>
					</view>
				</view>
				
				<!-- 月记录 -->
				<view class="style_3" v-if='pageData.period == 2'>
					<view class="weeks flex-box flex-between">
						<view class="weeks__item" v-for="week in weeks" :key="week">{{week}}</view>
					</view>
					<view class="list flex-box flex-between" v-if='pageData.data.list && pageData.data.list.length > 0'>
						<view class="item" v-for="(item,i) in pageData.data.list" :key='i' :class="{
							lastMonth: item.mStatus == 0,
							signIned: item.times > 0,
							times1: item.times == 1 && (pageData.data.list[i-1].times < 1 || i%7 == 0),
							today: item.today == 1,
						}" :style="{'--color': color,'--color_aid': color_aid}">
							<text class="num" :style="{'--color': color,'--color_aid': color_aid}">
								{{ item.day }}
							</text>
							<text v-if='item.times > 1' class="bg" :style="{
								'--color': color,
								'--color_aid': color_aid,
								width: 40+(item.times - 1)*102-item.times*2.2 + 'rpx',
								'z-index': 42-i
							}"></text>
						</view>
					</view>
				</view>
				
				<!-- 年记录 -->
				<view class="style_4" v-if='pageData.period == 4'>
					<view class="month">
						<swiper :duration="666" display-multiple-items='6' next-margin='12rpx' previous-margin='40rpx'>
							<swiper-item v-for="(item,i) in 12" :key='i' @click="monthCheck(i)">
								<view class="swiper-item" :class="{
									thmeBg: i+1 == parseInt(thisM),
									next: i+1 > parseInt(current_month)
								}" :style="{'--color': color}">
									<view>{{ i+1 }}月</view>
									<!-- 1积分 2余额 3优惠券-->
									<image :src="staticUrl+'/images/jh_up/icon-coin1.png'" mode="heightFix"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="weeks flex-box flex-between">
						<view class="weeks__item" v-for="week in weeks" :key="week">{{week}}</view>
					</view>
					<view class="list flex-box flex-between" v-if='pageData.data.list && pageData.data.list.length > 0'>
						<view class="item" v-for="(item,i) in pageData.data.list" :key='i' :class="{
							lastMonth: item.mStatus == 0,
							signIned: item.signIn == 1,
							today: item.today == 1,
						}" :style="{'--color': color,'--color_aid': color_aid}">
							<text class="num">
								{{ item.day }}
							</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="btn unStart" v-if='pageData.sign_in == 0'>签到活动暂未启</view>
			<view class="btn thmeBg" v-else :style="{'--color': color}" @click="signIn">{{signState==1?'已签到':'签到'}}</view>
			
			<view class="mask" @click="showRule = false" v-if='showRule'>
				<view class="sign-rule" @click.stop>
					<text class="iconfont icon-guanbi" @click="showRule = false"></text>
					<view class="title" :style="{'--color': color}">签到规则</view>
					<view class="rich-box" v-if="pageData.details" v-html="pageData.details"></view>
					<empty type='1' cat='2' pad='50' v-else msg='勤奋的小编正在火速编辑中···'></empty>
				</view>
			</view>
			<!-- 签到记录 -->
			<view class="sign-record">
				<view class="flex-box flex-between">
					<view class="title">签到记录</view>
					<view class="flex-box align-center" @click="showRule = true">
						<text class="txt1">规则</text>
						<text class="txt2">?</text>
					</view>
				</view>
				<view class="list">
					<view class="item flex-box align-center" v-if='record.length > 0' v-for="(item,i) in record" :key='i'>
						<view class="flex">
							<view class="day-txt">{{ item.remarks }}</view>
							<view class="date">{{ item.date }} {{ item.time }}</view>
						</view>
						<view class="flex-box align-center">
							<text class="num">+{{ item.number }}</text>
							<image :src="staticUrl+'/images/jh_up/icon-coin'+item.type+'.png'" mode="widthFix"></image>
						</view>
					</view>
					<empty type='1' cat='4' v-if='noRecord'  pad='50' msg='这里空空如也~ 签到可获得额外奖励哦'></empty>
				</view>
			</view>
		</view>
		<!-- 签到成功/失败-->
		<view class="mask flex-box align-center flex-center" @click="showOver = false" v-if='showOver && signinData'>
			<view class="mask-over" @click.stop>
				<view class="liner-bg toTop" :style="{'--color':color,'--color_aid': color_aid}"></view>
				<image :src="staticUrl+'/images/jh_up/succ-bg1.png'" class="succ-bg" mode="widthFix"></image>	
				<view class="succ-bg-title thmeBg" :style="{'--color':color}"></view>
				<!-- success --> 
				<text v-if='signinData.operation == 1' class="iconfont icon-xuanzhong thmeColor" :style="{'--color':color}"></text>
				<!-- fail -->
				<text v-else class="iconfont icon-guanbi1"></text>
				<view class="text-box">
					<!-- <view class="title">会员签到奖励</view> -->
					<!-- success -->
					<template v-if='signinData.operation == 1'>
						<view class="txt1">签到成功</view>
						<view class="txt2">{{ signinData.predict.title }}</view>
					</template>
					<!-- fail -->
					<template v-else>
						<view class="txt1">签到失败</view>
						<view class="txt2">{{ signinData.notice }}</view>
					</template>
					<view class="btn thmeBg" :style="{'--color':color}" @click="showOver = false">确定</view>
				</view>
				<text class="iconfont icon-guanbi" @click="showOver = false"></text>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	const gDate = new Date();
	let month = gDate.getMonth() + 1;
	let day = gDate.getDate();
	export default {
		data() {
			return {
				
				color: getApp().globalData.color,
				color_aid: getApp().globalData.color_aid,
				checks: [1, 2, 3, 4, 5, 6],
				signSuccess: false, // 签到成功弹窗
				signFail: false, // 签到失败弹窗
				weeks: ["日", "一", "二", "三", "四", "五", "六"],
				today: '', // 今天
				
				btnTxt: '', // 签到按钮文字
				
				
				
				succJf: '', // 签到成功积分
				wrongTxt: '', // 签到失败原因
				
				bid: uni.getStorageSync('bid'),
				staticUrl: this.staticUrl,
				nameDefinition: uni.getStorageSync('startUp').nameDefinition,
				noData: false,
				showRule: false,
				showOver: false,
				pageData: '',
				signData: '',
				signinData: '',
				signState: 0,
				thisM: month,
				current_month: month,
				pageSize: 10,
				page: 1,
				record:[],
				noRecord: false,
				more: false
			}
		},
		onShow() {
			that = this;
			that.myInfo();
			that.getConfig();
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid')
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		onReachBottom() {
			if(that.more){
				that.getRecord()
			}
		},
		onLoad() {
			that = this
			
			that.getRecord()
		},
		methods: {
			monthCheck(i){
				if(i < month){
					that.thisM = i+1
					that.getConfig()
				}
			},
			signIn(){
				if (that.signState != 1) {
					that.signinData = ''
					that.$http.post({
						url: '/SRA_userIntegral/signInActOperation',
						data: {
							VeriCode: that.bid,
							v_id: uni.getStorageSync('vid')
						}
					}).then(res => {
						if (res.code == 100) {
							that.signinData = res
							that.myInfo()
							that.getConfig()
							that.showOver = true
						}else{
							uni.showToast({
								title: res.notice,
								icon:'none'
							})
						}
					})
				} else {
					uni.showToast({
						icon:'none',
						title: '请勿重复签到！',
						duration: 1000
					})
				}
			},
			myInfo() { // 获取当前用户信息
				that.$http.post({
					url: '/SRA_userIntegral/myInfo',
					data: {
						VeriCode: that.bid,
						vId: uni.getStorageSync('vid')
					}
				}).then(res => {
					if (res.code == 100 && res.data) {
						that.signData = res.data.myJson
					}
				})
			},
			getRecord(){
				that.noRecord = false
				that.more = false
				that.$http.post({
					url: '/SRA_userIntegral/getSignInLog',
					data: {
						VeriCode: that.bid,
						v_id: uni.getStorageSync('vid'),
						pageIndex: that.page, //：查询页号 默认1
						pageSize: that.pageSize//：每页行数 默认10
					}
				}).then(res => {
					if(res.code == 100 && res.data){
						that.record = that.record.concat(res.data)
						if(res.data.length > that.pageSize-1){
							that.more = true
							that.page++
						}
					}
					if(that.record.length < 1){
						that.noRecord = true
					}
				})
			},
			getConfig() { // 获取配置信息
				that.$http.post({
					url: '/SRA_userIntegral/getSignInActConfig',
					data: {
						VeriCode: that.bid,
						v_id: uni.getStorageSync('vid'),
						thisM: that.thisM
					}
				}).then(res => {
					if(res.code == 100){
						if(res.data && res.data.list){
							res.data.list.forEach((d, i) => {
								d.mon = d.day.substring(5, 7); // 获取每天对应的月份
								if (d.mon.substring(0, 1) == '0') {
									d.mon = d.mon.substring(1, 2);
								}
								d.day = d.day.substring(8, 10); // 当天日期
								if (d.day.substring(0, 1) == '0') {
									d.day = d.day.substring(1, 2);
								}
								if (d.today == 1 && d.signIn == 1) { // 今天已签到
									that.signState = 1
								}
								if (parseInt(d.day) < day && parseInt(d.mon) == parseInt(that.thisM)) { // 本月已经过去的日期
									d.mStatus = 1;
								}
								if (parseInt(d.mon) < parseInt(that.thisM) || parseInt(d.mon) > parseInt(that.thisM)) { // 上/下个月
									d.mStatus = 0;
								}
								if(res.period == 2){ // 1自然周  2自然月 3季度 4自然年 5自定义
									d.times = 0
									if(d.signIn == 1){
										d.times = 1;
										if(i%7 == 0){ // 周日从1重新开始累加
											for(let m = i+1; m < 42; m++){
												if(res.data.list[m].signIn == 0){
													return
												}
												d.times ++
											}
											return
										}
										for(let j = i+1; j < 42; j++){
											if(res.data.list[j].signIn == 0 || res.data.list[i-1].times > 0){
												return
											}
											if(j%7 == 0){ // 遇到周六中断
												if(res.data.list[j-1].times == 0){
													d.times = 1
												}
												return
											}
											d.times ++
										}
									}
								}
							})
						}
						that.pageData = res;
						console.log(that.pageData)
					} else {
						uni.showToast({
							title: '暂无数据',
							icon:'none',
							duration: 2000
						});
					}
					if(!res.data || !res.data.list || res.data.list.length < 1){
						that.noData = true
					}
				})
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			integralR(){
				uni.navigateTo({
					url:'/userPage/sign/integralRecord'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.page{
	background-color: #F5F5F5;
	.topHead{
		height: 342rpx;
		border-radius:0 0 40rpx 40rpx;
		position: relative;
		.bg{
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
		}
		.box{
			width: 100%;
			text-align: center;
			position: relative;
			z-index: 1;
			.top-coin{
				width: 80rpx;
				margin-top: 6rpx;
				margin-right: 6rpx;
			}
			.coin-num{
				font-weight: bold;
				font-size: 96rpx;
				line-height: 110rpx;
				color: white;
				letter-spacing: -4rpx;
			}
			.txt1{
				color: white;
				font-size: 28rpx;
				text{
					font-size: 34rpx;
					font-weight: bold;
					padding: 0 6rpx;
				}
			}
			.txt2{
				color: white;
				font-size: 24rpx;
				width: 28rpx;
				height: 28rpx;
				border: 1px solid white;
				border-radius: 50%;
				box-sizing: content-box;
				line-height: 28rpx;
				margin-left: 10rpx;
			}
		
			.record-btn{
				background-color: rgba(0,0,0,0.1);
				position: absolute;
				top: 16rpx;
				right: 0;
				padding: 8rpx 4rpx 8rpx 24rpx;
				border-radius: 40rpx 0 0 40rpx;
				text{
					color: white;
					font-size: 28rpx;
					&.icon-xiangyouxiayiye{
						margin-left: 6rpx;
					}
				}
				
			}
		}
	}

	.content{
		padding: 0 30rpx 60rpx;
		.sign_in{
			background-color: #FFFFFF;
			box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 16rpx;
			position: relative;
			z-index: 2;
			margin-top: -30rpx;
			.title{
				text-align: center;
				font-size: 28rpx;
				padding: 30rpx;
				text{
					font-size: 40rpx;
					margin: 0 10rpx;
					vertical-align: -4rpx;
				}
			}
			.style_1{
				padding-bottom: 50rpx;
				.col-odd{
					position: relative;
					.icon-ww{
						position: absolute;
						width: 72rpx;
						height: 136rpx;
						left: -72rpx;
						top: 38rpx;
						transform: rotate(180deg);
					}
				}
				.col-sin{
					position: relative;
					.icon-ww{
						position: absolute;
						width: 72rpx;
						height: 136rpx;
						right: 2rpx;
						top: 38rpx;
					}
				}
				.list{
					flex-wrap: wrap;
					padding: 0 10rpx 0 82rpx;
					overflow: hidden;
					.item{
						margin: 20rpx 0 56rpx;
						width: 20%;
						.bar-box{
							width: 40rpx;
							height: 12rpx;
							background-color: #FDC92F;
						}
						&:nth-last-of-type(1){
							.bar-box{display: none;}
						}
						.day-box{
							position: relative;
							.day{
								width: 48rpx;
								height: 48rpx;
								background-color: #FFF7E0;
								border-radius: 50%;
								text-align: center;
								line-height: 48rpx;
								color: #FDC92F;
								position: relative;
								.icon-coin{
									position: absolute;
									top: 50%;
									left: 50%;
									width: 62rpx;
									height: 62rpx;
									transform: translate(-50%,-50%);
									display: none;
									z-index: 2;
								}
								.coin-today{
									position: absolute;
									width: 68rpx;
									left: 50%;
									bottom: -14rpx;
									transform: translateX(-50%);
									display: none;
									z-index: 2;
								}
							}
							.day-txt{
								color: #999999;
								font-size: 20rpx;
								text-align: center;
								position: absolute;
								top: 54rpx;
								left: 50%;
								width: 120rpx;
								padding: 0 4rpx;
								margin-left: -60rpx;
								// white-space: nowrap;
							}
						}
						&.active{
							// .bar-box{
							// 	background-color: #FDC92F;
							// }
							&::before{
								background-color: #FDC92F;
							}
							.day-box{
								.day{
									.icon-coin{
										display: block;
									}
								}
							}
						}
						&.today{
							&::before{
								background-color: #FDC92F;
							}
							.bar-box{
								background-color: #FDC92F;
							}
							.day-box{
								.day{
									.coin-today{
										display: block;
									}
								}
							}
						}
					}
				}
			}
			.style_2{
				.list{
					padding-left: 30rpx;
					flex-wrap: wrap;
					padding-bottom: 10rpx;
					.item{
						text-align: center;
						width: 136rpx;
						height: 180rpx;
						margin-right: 28rpx;
						background-color: #F5F5F5;
						border-radius: 16rpx;
						margin-bottom: 20rpx;
						padding-top: 20rpx;
						image{
							height: 64rpx;
							margin: 6rpx auto 0;
						}
						view:nth-of-type(1){color: #333333;}
						view:nth-of-type(2){color: #999999;font-size: 20rpx;margin-top: 8rpx;}
						&:nth-last-child(1){
							width: 300rpx;
							margin-right: 0;
							text-align: left;
							padding: 20rpx 0 0 30rpx;
							position: relative;
							image{
								position: absolute;
								right: 20rpx;
								bottom: 20rpx;
								height: 128rpx;
							}
						}
						&.active{
							view{color: #FFFFFF;}
						}
					}
				}
			}
		
			.style_3{
				.weeks{
					&__item{
						flex: 1;
						color: #333333;
						text-align: center;
					}
				}
				.list{
					padding-bottom: 50rpx;
					flex-wrap: wrap;
					.item{
						margin-top: 38rpx;
						width: 14.285%;
						line-height: 38rpx;
						text-align: center;
						position: relative;
						.num{
							position: relative;
							z-index: 43;
							display: block;
							margin: 0 auto;
							width: 38rpx;
							height: 38rpx;
							color: #333333;
							border-radius: 50%;
						}
						.bg{
							position: absolute;
							height: 38rpx;
							width: 38rpx;
							top: 0;
							left: 30rpx;
							border-radius: 38rpx;
							z-index: 1;
							background: linear-gradient(45deg,var(--color_aid),var(--color));
							box-shadow: 0px 0px 4rpx 0px var(--color);
							display: none;
						}
						&.lastMonth{
							text{
								color: #999999;
							}
						}
						&.times1{
							.num{
								color: #FFFFFF;
								background: linear-gradient(45deg,var(--color_aid),var(--color));
								box-shadow: 0px 0px 4rpx 0px var(--color);
							}
							
						}
						&.signIned{
							.num{
								color: #FFFFFF;
							}
							.bg{
								display: block;
							}
						}
						&.today{
							.num{
								color: #FFFFFF;
								background: var(--color);
							}
						}
					}
				}
			}
			
			.style_4{
				overflow-x: hidden;
				.month{
					padding-bottom: 38rpx;
					margin-bottom: 18rpx;
					border-bottom: 2rpx dashed #EEEEEE;
					position: relative;
					&::before{
						position: absolute;
						content: '';
						width: 28rpx;
						height: 28rpx;
						left: -14rpx;
						background-color: #F5F5F5;
						border-radius: 50%;
						bottom: -14rpx;
						box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.06) inset;
					}
					&::after{
						position: absolute;
						content: '';
						width: 28rpx;
						height: 28rpx;
						right: -14rpx;
						background-color: #F5F5F5;
						border-radius: 50%;
						bottom: -14rpx;
						box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.06) inset;
					}
					swiper{
						width: 100%;
						height: 108rpx;
						position: relative;
					}
					.swiper-item{
						width: 76rpx;
						height: 108rpx;
						background-color: #F5F5F5;
						border-radius: 12rpx;
						padding-top: 14rpx;
						view{
							text-align: center;
							color: #333333;
						}
						image{
							height: 34rpx;
							display: block;
							margin: 16rpx auto 0;
						}
						&.thmeBg{
							view{
								color: #FFFFFF;
							}
						}
						&.next{
							opacity: 0.6;
						}
					}
				}
				
				.weeks{
					&__item{
						flex: 1;
						color: #333333;
						text-align: center;
					}
				}
				.list{
					padding-bottom: 50rpx;
					flex-wrap: wrap;
					.item{
						margin-top: 38rpx;
						width: 14.285%;
						line-height: 38rpx;
						text-align: center;
						position: relative;
						.num{
							position: relative;
							z-index: 43;
							display: block;
							margin: 0 auto;
							width: 38rpx;
							height: 38rpx;
							color: #333333;
							border-radius: 50%;
						}
						&.lastMonth{
							text{
								color: #999999;
							}
						}
						&.signIned{
							.num{
								color: #FFFFFF;
								background: linear-gradient(45deg,var(--color_aid),var(--color));
								box-shadow: 0px 0px 4rpx 0px var(--color);
								opacity: 0.7;
							}
						}
						&.today{
							.num{
								color: #FFFFFF;
								background: var(--color);
							}
						}
					}
				}
			}
		}
		.btn{
			width: 480rpx;
			line-height: 96rpx;
			border-radius: 96rpx;
			text-align: center;
			color: white;
			font-size: 28rpx;
			margin: 46rpx auto 0;
			position: relative;
			&::before{
				position: absolute;
				content: '';
				width: 100%;
				height: 100%;
				box-shadow: 0px 0px 12rpx 0px var(--color);
				left: 0;
				border-radius: 96rpx;
				opacity: 0.36;
			}
			&.unStart{
				background-color: #AFAFAF;
			}
		}
		.sign-rule{
			background-color: #FFFFFF;
			box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 16rpx 16rpx 0 0;
			margin-top: 46rpx;
			padding: 30rpx;
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			min-height: 450rpx;
			@keyframes bot{
				0%{
					bottom: -600rpx;
				}
				100%{
					bottom: 0;
				}
			}
			animation: bot .2s linear forwards;
			.icon-guanbi{
				color: #CCCCCC;
				font-size: 38rpx;
				background-color: #FFFFFF;
				position: absolute;
				top: -40rpx;
				padding: 10rpx;
				right: 0;
				display: block;
				border-radius: 50%;
			}
			.title{
				font-size: 28rpx;
				position: relative;
				&::before{
					content: '';
					width: 10rpx;
					height: 28rpx;
					background: var(--color);
					position: absolute;
					left: -30rpx;
					border-radius: 0 6rpx 6rpx 0;
					top: 50%;
					margin-top: -14rpx;
				}
			}
			.rich-box{
				margin-top: 30rpx;
				line-height: 34rpx;
				text-align: justify;
				max-height: 70vh;
				overflow-y: auto;
			}
		}
	
		.sign-record{
			background-color: #FFFFFF;
			box-shadow: 0px 0px 12rpx 0px rgba(255, 62, 66, 0.06);
			border-radius: 16rpx;
			margin-top: 46rpx;
			padding: 24rpx 20rpx;
			min-height: 450rpx;
			.title{
				font-size: 32rpx;
				color: #333333;
			}
			.txt1{
				color: #999999;
				font-size: 28rpx;
			}
			.txt2{
				color: #999999;
				font-size: 22rpx;
				width: 26rpx;
				height: 26rpx;
				border: 1px solid #999999;
				border-radius: 50%;
				box-sizing: content-box;
				line-height: 26rpx;
				margin-left: 10rpx;
				text-align: center;
			}
			.list{
				.item{
					margin-top: 24rpx;
					.day-txt{
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 6rpx;
					}
					.date{color: #999999;}
					.num{
						font-size: 36rpx;
						color: #333333;
						font-weight: bold;
					}
					image{
						width: 44rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	.mask-over{
		width: 600rpx;
		height: 760rpx;
		position: relative;
		.succ-bg-title{
			position: absolute;
			top: -44rpx;
			border-radius: 10rpx 10rpx 0 0;
			left: 50%;
			margin-left: -40rpx;
			width: 80rpx;
			height: 18rpx;
			z-index: 1;	
			&::before{
				content: '';
				position: absolute;
				width: 20rpx;
				height: 20rpx;
				background-color: inherit;
				border-radius: 50%;
				top: -8rpx;
				left: 30rpx;
			}
		}
		.succ-bg{
			width: 100%;
			position: absolute;
			top: -50rpx;
			left: 0;
		}
		.liner-bg{
			height: 350rpx;
			// background: linear-gradient(180deg, #FF3144 0%, #FF8531 100%);
			border-radius: 24rpx 24rpx 0 0;
		}
		.icon-xuanzhong,.icon-guanbi1{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 80rpx;
			z-index: 1;
			font-size: 100rpx;
		}
		.icon-guanbi1{
			font-size: 86rpx;
			color: #CCCCCC;
			top: 114rpx;
		}
		.text-box{
			width: 100%;
			text-align: center;
			background-color: #FFFFFF;
			z-index: 1;
			padding: 40rpx ;
			border-radius: 0 0 24rpx 24rpx;
			.title{
				font-size: 52rpx;
				color: #333333;
				font-weight: bold;
				letter-spacing: 8rpx;
			}
			.txt1{
				font-size: 44rpx;
				font-weight: bold;
				height: 62rpx;
				color: #333333;
				margin-top: 20rpx;
			}
			.txt2{
				font-size: 30rpx;
				color: #CCCCCC;
				height: 42rpx;
				margin-top: 20rpx;
			}
			.btn{
				width: 376rpx;
				line-height: 84rpx;
				border-radius: 96rpx;
				text-align: center;
				color: white;
				font-size: 32rpx;
				margin: 30rpx auto 0;
			}
		}
		
		.icon-guanbi{
			color: #CCCCCC;
			opacity: 0.6;
			font-size: 56rpx;
			display: block;
			margin: 14rpx auto 0;
		}
	}
}
</style>
